<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>列表排序</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        v-for指令
            1：用于展示列表数据
            2：语法： v-for="(item,index) in xxx" :key="yyy"
            3:可遍历：数组，对象，字符串，指定次数
     -->

    <!-- 准备好一个容器 -->
    <div id="root">

        <h2>人员列表 </h2>

        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button v-on:click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">年龄原序</button>
        <ul>
            <li v-for="(p,index) in filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>



    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    

        // 用计算属性实现
        const vm = new Vue({
            el: '#root',
            data: {
                keyWord: '',
                name: '徐亚远',
                sortType: 0, // 0原顺序，1降序，2升序。
                persons: [
                    { id: "001", name: "马冬梅", age: 80, sex: '女' },
                    { id: "002", name: "周冬雨", age: 21, sex: '女' },
                    { id: "003", name: "周杰伦", age: 3, sex: '男' },
                    { id: "004", name: "温兆伦", age: 94, sex: '男' },
                ],
                car: {
                    name: "奥迪",
                    price: 700000,
                    color: "黑色"
                },
                str: "hello"
            },
            computed: {
                filterPersons(){
                    const sortArr =  this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                    // 判断是否需要排序
                    if(this.sortType) {
                        sortArr.sort((p1, p2)=>{
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return sortArr;
                }
            }
        })
    </script>


</body>

</html>